<template>
    <div class="Playlist-out">
         <div class="presonHome">
            <img :src="profile.avatarUrl" alt="">
            <div class="presonHome-right">
               <div class="presonHome-right-top">
                    <div class="item1">{{profile.nickname}}</div>
                    <!-- <div  class="item2">{{"Lv" +" "+ profile.level}}
                      <span class="item2">{{"Lv" +" "+ profile.level}}</span>
                      <span>退出登录</span>
                    </div> -->
                     <div  class="item">
                      <span class="item2">{{"Lv" +" "+ profile.level}}</span>
                      <div class="item3" @click="Outlogin"  v-if="$route.query.uid==userId">
                        <i class="iconfont icon-zhuxiao1"></i>
                         退出登录
                      </div>
                    </div>
               </div>
                <div class="presonHome-right-middle">
                     <div class="right-middle-item">
                     <p  class="p1">{{profile.eventCount}}</p>
                     <p  >动态</p>
                   </div>
                     <div class="right-middle-item boder">
                     <p class="p1">{{profile.newFollows}}</p>
                     <p>关注</p>
                   </div class="p1">
                     <div class="right-middle-item">
                     <p class="p1">{{profile.followeds}}</p>
                     <p>粉丝</p>
                   </div>
               </div>
                <div class="presonHome-right-bottom">
                  <p class="p">用户id<span style="color:#aaa">:{{profile.userId}}</span></p>
                  <p class="p">所在地区 <span style="color:#aaa" >:  {{ profile.province + " " + profile.city }}</span></p>
                  <p class="p">个人介绍 <span style="color:#aaa">:{{profile.signature|| "暂无介绍" }}</span></p>
               </div>
            </div>
         </div>
        <!-- 主页收藏 -->
         <div class="enshrine-big">
             <div :class="{active:indexChange===1}" @click="indexChange=1">创建歌单</div>
             <div :class="{active:indexChange===2}" @click="indexChange=2">收藏歌单</div>
         </div>
         <songList
         v-if="indexChange==1"
        :songList=playlist
         />
            <songList
         v-if="indexChange==2"
        :songList=likeList
         />
      <div
  
     
    </div>
</template>

<script>
export default {
   name:"MyHome",
   data(){
     return{
        indexChange:1,
        profile:{},
        playlist:[],
        likeList:[],
     }
   },
   computed:{
      userId(){
        return this.$Store.state.homePage.userName.userId
      }
   },
   methods:{
    async getPresondata(){ 
       console.log(this.$route.query.uid)   //获取用户信息
          const {data:res} =await this.$request("/user/detail",{
          uid:this.$route.query.uid
        })
        if(res.code!==200) return 
        res.profile.level=res.level
        this.profile=res.profile
     },
     async getUserSong(){  
       //获取用户歌单
       let timestamp = Date.parse(new Date());
         const {data:res} = await this.$request("/user/playlist", {
        uid: this.$route.query.uid,
        timestamp
      });
      console.log(res.playlist)
       let index = res.playlist.findIndex(item =>item.subscribed == true)
      
      this.playlist = res.playlist.slice(0, index);
      this.likeList = res.playlist.slice(index);
      
     },
     Outlogin(){  //退出登录
        this.$message.success("已退出登录")
          localStorage.removeItem("userName");
          localStorage.removeItem("cookie");
          this.$Store.commit("PresonUser",{})
          this.$router.push("/")

     },
     //获取用户歌单收藏
    async getText(){
        console.log(1)
        const res =await this.$request("/user/subcount")
      
     }
   },
   watch:{
     $route(){
        console.log("路由变化了")
        this.getPresondata()
        this.getUserSong()
     }
   },
   mounted(){
     document.documentElement.scrollTop=0
     this.getPresondata()
     this.getUserSong()
     this.getText()
   }
}
</script>

<style lang="less" scoped>
.Playlist-out{
  padding:30px 30px;
  width: 1300px;
  height:2000px;
  display: flex;
  flex-direction:column;
  margin:30px 100px 0 60px;
  
  .presonHome{
    display:flex;
    color:#000;
    img{
      width:210px;
      height:190px;
      border-radius:50%;
    }
    .presonHome-right{
         width:100%;
         height:180px;
        
        .presonHome-right-top{
           margin-left:15px;
           margin-top:10px;
           border-bottom:1px solid #000;
           width:100%;
          height:60px;
          .item1{
            width:100%;
           height:30px;
           font-size:20px;
           font-weight:600;
          }
          .item{
            display:flex;
            justify-content: space-between;
        .item3{
          width:100px;
          height:30px;
          line-height:30px;
          margin-right:80px;
          margin-top:-30px;
          text-align:center;
          font-size:13px;
          border:1px solid #ccc;
          border-radius:10px;
         i{
           font-size:13px;
         }
         &:hover{
           background-color:#c00000;
         }
        }

        }
        
        
          .item2{
              display:inline-block;
              width:30px;
              height:20px;
              line-height:20px;
              text-align:center;
              background-color:#ccc;
              border-radius:10px;
              font-size:12px;
          }
        }
    }
  
    .presonHome-right-middle{
      margin-top:10px;
      padding-left:0;
      display:flex;
      font-size:12px;
      .right-middle-item{
        width:60px;
        height:50px;
        text-align:center;
       .p1{
         font-size:18px;
         padding:5px 0;
        }
        .p2{
          text-align:left;
        }
    
      }
      .boder{border-left:1px solid #aaa;border-right:1px solid #aaa;}
    }
    .presonHome-right-bottom{
        font-size:12px;
        padding-left:15px;
        .p{
           padding:6px 6px 0 0;
        }
    }
  }
    .enshrine-big{
      margin:25px 0;
     display:flex;
     div{
       width:100px;
       height:25px;
       text-align:center;
     }
     .active{
       border-bottom:3px solid red;
       font-size:20px;
       font-weight:600;
       color:black;
     }
  }

}
    
</style>